<template>
    <List border size="small" class="list-product">
        <Row slot="header">
            <Col span="4">产品代码</Col>
            <Col span="6">产品名称</Col>
            <Col span="3">数量</Col>
            <Col span="3">单价</Col>
            <Col span="3">总毛重</Col>
            <Col span="3">条形码</Col>
            <Col span="2">操作</Col>
        </Row>
        <ListItem v-if="products.length === 0" class="no-products">
            <div>请添加产品</div>
        </ListItem>
        <ListItem v-for="(item, index) in products" :key="index">
            <Row :gutter="10" class="list-item-row">
                <Col span="4" :title="item.product.code">{{item.product.code}}</Col>
                <Col span="6" class="ellipsis" :title="item.product.title">{{item.product.title}}</Col>
                <Col span="3">
                    <FormItem :label-width="0"
                              :rules="ruleValidate.quantity"
                              :prop="`products.${index}.quantity`">
                        <Input number size="small" v-model="item.quantity" ></Input>
                    </FormItem>
                </Col>
                <Col span="3">
                    <FormItem :label-width="0"
                              :rules="ruleValidate.price"
                              :prop="`products.${index}.price`">
                        <Input number size="small" v-model="item.price"></Input>
                    </FormItem>
                </Col>
                <Col span="3">
                    <div :title="`${item.quantity}*${item.product.weight}`">{{item.quantity * item.product.gross_weight}}</div>
                </Col>
                <Col span="3">
                    <FormItem :label-width="0"
                              :rules="ruleValidate.barcode"
                              :prop="`products.${index}.barcode`">
                        <Input size="small" v-model="item.barcode"></Input>
                    </FormItem>
                </Col>
                <Col span="2">
                    <Button type="error" size="small" @click="deleteProduct(index)">删除</Button>
                </Col>
            </Row>
        </ListItem>

        <Row slot="footer">
            <Col span="8">
                <Button :disabled="customer === 0 || customer === undefined" type="success" size="small" @click="openComponent('ProductList')">
                    添加商品
                </Button>
            </Col>
            <Col span="2">合计</Col>
            <Col span="3">{{total.quantity.toLocaleString()}}</Col>
            <Col span="3">总价:{{total.price.toLocaleString()}}</Col>
            <Col span="3">总毛重:{{total.weight.toLocaleString()}}</Col>
            <Col span="2">
                <FormItem prop="products" :label-width="0" :rules="ruleValidate.products"></FormItem>
            </Col>
        </Row>

        <component :is="componentProps.view" :customer="customer" v-model="componentProps.value" :props="products"
                   @on-product-choose="productChoose"></component>
    </List>
</template>

<script>

    import contentListPage from '../../../mixins/contentListPage';
    import ProductList from "../../../components/form/chooseProductList";
    import {floatObj} from "../../../../libs/util";
    import contentDrawer from "../../../mixins/contentDrawer";

    export default {
        name: "list-product",
        components: {ProductList},
        mixins: [contentListPage, contentDrawer],
        props: {
            value: {
                type: Array
            },
            customer: {
                required: true
            }
        },
        data() {
            return {
                products: [],
                ruleValidate: {
                    products: [
                        {type: 'array', required: true, message: '至少选择一个产品'}
                    ],
                    quantity: [
                        {type: 'integer', required: true, message: '数量必须填写'},
                        {type: 'integer', min: 1, message: '数量不能小于1'},
                    ],
                    price: [
                        {type: 'number', required: true, message: '单价必须填写'},
                        {
                            type: 'number', validator: (rule, value) => {
                                if (value <= 0) {
                                    return new Error('单价不能小于或等于0');
                                }
                                return true;
                            }
                        }
                    ],
                    barcode: [
                        {required: true, message: '条形码必须填写'}
                    ]
                }
            }
        },
        computed: {
            total() {
                let quantity = 0, price = 0, weight = 0;

                this.products.forEach((item) => {
                    quantity = floatObj().add(quantity, item.quantity);
                    price = floatObj().add(price, floatObj().multiply(item.price, item.quantity));
                    weight = floatObj().add(weight, floatObj().multiply(item.product.gross_weight, item.quantity));
                });
                return {
                    quantity, price, weight
                }
            }
        },
        methods: {
            deleteProduct(index) {
                this.products.splice(index, 1);
                this.emitProduct();
            },
            productChoose(val) {
                let index = this.products.findIndex((item) => item.product_id === val.id);
                if (index === -1) {
                    this.products.push({
                        code: val.code,
                        quantity: 0,
                        price: 0,
                        barcode: val.code,
                        product: val,
                        product_id: val.id
                    });
                }
                this.emitProduct();
            },
            emitProduct(){
                this.$emit('input', this.products);
            }
        },
        watch: {
            value(val) {
                this.products = val
            }
        }
    }
</script>

<style scoped lang="less">
    .no-products {
        color: #c3cbd6;
        text-align: center;
        background-color: #f8f8f9;

        div {
            width: 100%;
        }
    }

    .list-header-right {
        text-align: right;
    }

    .list-header {
        border-bottom: 1px solid #e8eaec;
    }

    .list-item-row {
        width: 100%;
    }

    .list-product {
        margin-bottom: 20px;
    }
</style>

<style lang="less">
    .list-product {
        .ivu-form-item {
            margin-bottom: 0;

            .ivu-form-item-content {
                line-height: 0;
            }
        }
    }
</style>
